<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经销商订单列表</title>
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />

</head>
<body>
    <div id="app">
           <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
            <div class="app-containers main-content">
            <div class="content">

                <el-table v-loading="loading" :data="orderList">
                    <el-table-column label="订单编号" align="center" prop="cdoCode" width="180">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="detailView(scope.row)">{{scope.row.cdoCode}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单日期" align="center" prop="cdoTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.cdoTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" align="center" prop="status">
                        <template slot-scope="scope">
                            {{ getOptionsStr('so_status',scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单金额（元）" align="center" prop="doAmount" width="160"></el-table-column>
                    <el-table-column label="未税金额（元）" align="center" prop="noTaxAmount" width="160"></el-table-column>
                    <el-table-column label="订金（元）" align="center" prop="depositAmount" width="160"></el-table-column>
                    <el-table-column label="币种" align="center" prop="currencyType" width="160">
                        <template slot-scope="scope">
                            {{ getOptionsStr('so_currency_type',scope.row.currencyType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="本币金额（元）" align="center" prop="localCurrencyAmount" width="160"></el-table-column>
                    <el-table-column label="交车经办人" align="center" prop="deliverPerson" width="180"></el-table-column>
                    <el-table-column label="预计交付时间" align="center" prop="expectedTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.expectedTime }}</span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="操作" align="center" :resizable="false" :show-overflow-tooltip="false" width="180" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="detailView(scope.row)">详情</el-button>
                             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>

                <el-pagination
                    v-show="total>0"
                    :total="total"
                    :current-page.sync="queryParams.pageNum"
                    :page-size.sync="queryParams.pageSize"
                    @current-change="getList"></el-pagination>
            </div>
        </div>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <!-- 引入axios -->
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>
    <script type="module">
        import LxHeader from '../../pages/components/LxHeader/index.js'
        Vue.component('lx-header', LxHeader)
        checkAuthentication(2)
        new Vue({
            el: '#app',
            data() {
               return {
                   isToggle: false,
                   currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                    userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                    showDropdown: false,
                    businessCenters: [
                        { name: '订单中心', path: '../index.html' },
                        { name: '用户中心', path: '#' },
                        { name: '产品中心', path: '#' },
                        { name: '库存中心', path: '#' },
                        { name: '财务中心', path: '#' },
                        { name: '数据中心', path: '#' },
                        { name: '系统中心', path: '#' },
                        { name: '消息中心', path: '#' }
                    ],
                    // 遮罩层
                    loading: true,
                    // 选中数组
                    ids: [],
                    // 非单个禁用
                    single: true,
                    // 非多个禁用
                    multiple: true,
                    // 显示搜索条件
                    showSearch: true,
                    // 总条数
                    total: 0,
                    // 销售订单信息表格数据
                    orderList: [],
                    // 弹出层标题
                    title: "",
                    // 是否显示弹出层
                    open: false,
                    // 查询参数
                    queryParams: {
                        pageNum: 1,
                        pageSize: 10,
                        userId: null,
                        soType: 2,
                        cdoCode: null,
                        soTime: null,
                        status: null,
                        attachmentAddress: null,
                        soAmount: null,
                        noTaxAmount: null,
                        depositAmount: null,
                        currencyType: null,
                        localCurrencyAmount: null,
                        deliverPerson: null,
                        deliverAddress: null,
                        expectedTime: null,
                        storeName: null,
                        storeAddress: null,
                        storeContact: null,
                        soRate: null,
                        taxAmount: null,
                        responsibilityDept: null
                    },
                    // 表单参数
                    form: {},
                    // 表单校验
                    rules: {},
                    // 字典数据
                    // dict: dict,
                    request_host: request_host,
                    dicts: ['so_status', 'so_type', 'so_currency_type'],
                    optionsObj: {},
                }
            },
            created() {
                this.getList()
                this.getOptions()
            },
            methods: {
                exit,
                /** 查询销售订单信息列表 */
                getList() {
                    this.loading = true
                    // 这里替换为实际的API调用
                    axios.get(`${this.request_host}/system/do/list`, { params: this.queryParams })
                        .then(response => {
                            this.orderList = response.data.rows
                            this.total = response.data.total
                            this.loading = false
                        })
                },
                getOptions() {
                    this.dicts.forEach((item) => {
                        axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                            this.$set(this.optionsObj, item, {})
                            if (response.status == 200) {
                                response.data.data.map((item1) => {
                                    this.optionsObj[item][item1.dictValue] = item1.dictLabel
                                })
                            }
                        })
                    })
                },
                getOptionsStr(opt, value) {
                    if (this.optionsObj[opt] && value) {
                        return this.optionsObj[opt][value]
                    }
                    return ''
                },
                // 取消按钮
                cancel() {
                    this.open = false
                    this.reset()
                },
                // 表单重置
                reset() {
                    this.form = {
                        id: null,
                        userId: null,
                        soType: null,
                        cdoCode: null,
                        soTime: null,
                        status: null,
                        attachmentAddress: null,
                        remark: null,
                        soAmount: null,
                        noTaxAmount: null,
                        depositAmount: null,
                        currencyType: null,
                        localCurrencyAmount: null,
                        deliverPerson: null,
                        deliverAddress: null,
                        expectedTime: null,
                        storeName: null,
                        storeAddress: null,
                        storeContact: null,
                        soRate: null,
                        taxAmount: null,
                        responsibilityDept: null,
                        delFlag: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null
                    }
                    this.resetForm("form")
                },
                /** 搜索按钮操作 */
                handleQuery() {
                    this.queryParams.pageNum = 1
                    this.getList()
                },
                /** 重置按钮操作 */
                resetQuery() {
                    this.resetForm("queryForm")
                    this.handleQuery()
                },
                /** 删除按钮操作 */
                handleDelete(row) {
                    const ids = row.id || this.ids
                    this.$confirm('是否确认删除销售订单信息编号为"' + ids + '"的数据项？', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        // 这里替换为实际的API调用
                        return axios.delete(`${this.request_host}/system/order/` + ids)
                    }).then(() => {
                        this.getList()
                        this.$message.success("删除成功")
                    })
                },
                /** 导出按钮操作 */
                handleExport() {
                    this.$confirm('是否确认导出所有销售订单数据项?', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        // 这里替换为实际的API调用
                        window.location.href = `${this.request_host}/system/order/export`
                    })
                },
                detailView(row) {
                    const cdoCode = row.cdoCode;
                    const params = `cdoCode=${encodeURIComponent(cdoCode)}`;
                    const url = `dealer_order_item.html?${params}`;
                    window.open(url, '_blank');
                },
                openMenu(url) {
                    window.open(url)
                },
            }
        })
    </script>
    <style>
        .el-table th.el-table__cell {
          background-color: #f2f2f2; /* 例如，设置为浅灰色 */
        }
        .breadcrumb-container {
            padding: 12px 20px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0,21,41,.08);
            margin-bottom: 20px;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .breadcrumb-container .el-breadcrumb {
            line-height: 1;
            font-size: 13px;
        }
        .breadcrumb-container .el-breadcrumb__item:last-child .el-breadcrumb__inner {
            color: #409EFF;
            font-weight: bold;
        }
        .breadcrumb-container .el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner {
            color: #606266;
        }
    </style>
</body>
</html>
